<template>
  <div class="wrap" :style="{minHeight:$store.state.minHeight-.5+'rem'}">
    <myHead title="兼职"></myHead>
    <div class="lifeHead">
      <div>
        <img :src="userInfo.avatar" alt="" class="userHead">
        <div class="lifeInfo">
          <p>{{userInfo.nickname}}</p>
          <div class="lifeGxqm" @click="autograph"><img src="../../../../static/img/fenxiang111.png" alt="">
            <input type="text" :placeholder="userInfo.bio?userInfo.bio:bio"></div>
        </div>
      </div>
      <div class="myGz">
          <div @click="jump('life/release')"><p>{{headline_consult}}</p><p>我的发布</p></div>
          <div @click="jump('lifeMyConcerns')"><p>{{attention}}</p><p>我的关注</p></div>
          <div @click="jump('lifeMyFans')"><p>{{attention_user_id}}</p><p>我的粉丝</p></div>
      </div>
    </div>
    <div class="lifeIcon">
        <div class="icon-item" v-for="x in iconList" @click="jump(x.page)">
          <img :src="x.url" alt="">
          <p>{{x.text}}</p>
        </div>
    </div>
    <div class="life-order">
      <div class="life-order-item" @click="jump('twoHandsOrderList')">
        <p>
          <img src="../../../../static/img/jz001.png" alt="">
          <span>二手订单</span>
        </p>
        <img src="../../../../static/img/youjiantou003.png" alt="">
      </div>
      <div class="life-order-item" @click="jump('HelpAndFeedback')">
        <p>
          <img src="../../../../static/img/jz002.png" alt="">
          <span>帮助与反馈</span>
        </p>
        <img src="../../../../static/img/youjiantou003.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
  import myHead from "../lib/myHead";

  export default {
    name: "lifeMy",
    components: {
      myHead
    },
    data(){
      return {
        userInfo:{},
        bio:"用一句话介绍自己...",//格言
        attention:0,//关注
        attention_user_id:0,//粉丝
        headline_consult:0,//发布条数
        iconList:[{url:"../../../../static/img/lifeIcon1.png",text:'在线简历',page:'OnlineResume'},{url:"../../../../static/img/lifeIcon2.png",text:'岗位收藏',page:'partTimeJobCollection'},
          {url:"../../../../static/img/lifeIcon3.png",text:'我的投递 ',page:'posted'},{url:"../../../../static/img/lifeIcon4.png",text:'浏览记录',page:'BrowsingRecords'},{url:"../../../../static/img/gly001.png",text:'岗位管理',page:'PositionManagement'},{url:"../../../../static/img/gly002.png",text:'岗位投递',page:'twHandsDeliveryRecord'}],
      }
    },
    created() {
      if(this.$myStorage.query()){
        console.log(this.$myStorage.query());
        this.$myAxios('index/LiveUser/head', 'post',{
          user_id:this.$myStorage.query()
        }).then(res=>{
          console.log(res);
          if(res.data.state == 1){
            this.userInfo = res.data.user;
            this.attention = res.data.attention;
            this.attention_user_id = res.data.attention_user_id;
            this.headline_consult = res.data.headline_consult;
          }else{
            this.$myNotice("网络连接中断...",2000)
          }
        });
      }else{
        this.$router.push({
          name:'login'
        })
      }
    },
    mounted() {

    },
    methods:{
      jump(page){
        this.$router.push({
          name:page
        })
      },
      autograph(){

      }
    }
  }
</script>

<style scoped>
  .wrap {
    width: 100%;
    box-sizing: border-box;
    padding-top: .5rem;
    padding-bottom: .65rem;
    background-color: #F8F8FA;
  }

  .lifeHead {
    width: 100%;
    height: 1.4rem;
    box-sizing: border-box;
    background-image: url("../../../../static/img/lifemybeijing.png");
    background-size: 100% 100%;
    padding-left: .15rem;
    padding-right: .15rem;
    padding-top: .1rem;
  }
  .lifeHead>div:nth-child(1) {
    display: flex;
    flex-flow: row;
    align-items: center;
    box-sizing: border-box;
    margin-bottom: .2rem;
  }
  .userHead {
    width: .7rem;
    height: .7rem;
    border-radius: .35rem;
    margin-right: .2rem;
  }
  .lifeInfo {
    height: .7rem;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
  }
  .lifeInfo>p {
    font-size:.24rem;
    font-family:Source Han Sans CN;
    font-weight:500;
    color: #FFFFFF;
  }
  .lifeGxqm {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .lifeGxqm>input {
    font-size:.12rem;
    font-family:SourceHanSansCN;
    font-weight:300;
    color: #FFFFFF;
    line-height: .14rem;
    width: 2.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: transparent;
    border: none;
  }
  .lifeGxqm>input::placeholder {
    color: #FFFFFF;
  }
  .lifeGxqm>img {
    width: .14rem;
    height: .14rem;
    margin-right: .05rem;
  }

  .myGz {
    width: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .myGz>div {
    width: calc(100% / 3);
    height: .25rem;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: space-around;
  }
  .myGz>div>p:nth-child(1) {
    font-size:.22rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #FFFFFF;
    line-height: .23rem;
  }
  .myGz>div>p:nth-child(2) {
    font-size:.11rem;
    line-height: .2rem;
    font-family:PingFang SC;
    color: #FFFFFF;
  }
  .myGz>div:nth-child(2) {
    border-left: .01rem solid #F5F5F5;
    border-right: .01rem solid #F5F5F5;
  }

  .lifeIcon {
    width: 95%;
    background-color: #FFFFFF;
    margin: .12rem auto;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    border-radius: .1rem;
  }
  .icon-item {
    width: calc(100% / 3);
    height: .7rem;
    box-sizing: border-box;
    padding: .1rem 0;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: space-between;
  }
  .icon-item>img {
    width: .19rem;
    height: .19rem;
  }
  .icon-item>p {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:400;
    color: #333333;
  }

  .life-order {
    background-color: #FFFFFF;
    width: 95%;
    margin: 0 auto;
    border-radius: .1rem;
  }
  .life-order-item {
    height: .5rem;
    padding: 0 .15rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    border-bottom: .01rem solid #F6F6F6;
  }
  .life-order-item:nth-last-child(1) {
    border-bottom: none;
  }
  .life-order-item>img:nth-child(2) {
    width: .08rem;
    height: .14rem;
  }
  .life-order-item>p>img {
    width: .2rem;
    max-height: .2rem;
    margin-right: .15rem;
  }
  .life-order-item>p {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .life-order-item>p>span {
    font-size:.14rem;
    font-family:PingFang SC;
    color: #222222;
    font-weight: 600;
  }
</style>
